<template>
  <v-card flat title="学生数据">
    <v-btn
      icon="mdi-plus"
      @click="openDialog"
      style="margin-left: 20px"
    ></v-btn>
    <template v-slot:text>
      <div class="d-flex flex-row">
        <v-text-field
          style="margin: 5px"
          v-model="searchSid"
          label="学生学号"
          variant="outlined"
        ></v-text-field>
        <v-text-field
          style="margin: 5px"
          v-model="searchSname"
          label="学生姓名"
          variant="outlined"
        ></v-text-field>
        <v-btn icon="mdi-magnify" style="margin: 5px" @click="searchS"></v-btn>
      </div>
    </template>

    <!-- 弹出对话框 -->
    <v-dialog v-model="studentDialog" max-width="500px" persistent>
      <v-card>
        <v-card-title>填写学生信息</v-card-title>
        <v-card-text>
          <v-form>
            <!-- 在这里添加输入框 -->
            <v-text-field
              v-model="editedStudent.sname"
              label="学生姓名"
            ></v-text-field>
            <v-text-field
              v-model="editedStudent.student_id"
              label="学号"
            ></v-text-field>
            <v-text-field
              v-model="editedStudent.grade"
              label="年级"
            ></v-text-field>
            <v-text-field
              v-model="editedStudent.sex"
              label="性别"
            ></v-text-field>
            <v-text-field
              v-model="editedStudent.native_place"
              label="地区"
            ></v-text-field>
            <v-text-field
              v-model="editedStudent.mobile_phone"
              label="手机号"
            ></v-text-field>
            <v-combobox
              v-model="editedStudent.dept_id"
              :items="deptOptions"
              label="所属学院"
            ></v-combobox>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="saveChanges">保存</v-btn>
          <v-btn @click="closeDialog">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="editDialog" max-width="500px" persistent>
      <v-card>
        <v-card-title>修改学生信息</v-card-title>
        <v-card-text>
          <v-form>
            <!-- 在这里添加输入框 -->
            <v-text-field
              v-model="changeStudent.sname"
              label="学生姓名"
            ></v-text-field>
            <v-text-field
              v-model="changeStudent.student_id"
              label="学号"
              readonly
            ></v-text-field>
            <v-text-field
              v-model="changeStudent.grade"
              label="年级"
            ></v-text-field>
            <v-text-field
              v-model="changeStudent.sex"
              label="性别"
            ></v-text-field>
            <v-text-field
              v-model="changeStudent.native_place"
              label="地区"
            ></v-text-field>
            <v-text-field
              v-model="changeStudent.mobile_phone"
              label="手机号"
            ></v-text-field>
            <v-combobox
              v-model="changeStudent.dept_id"
              :items="deptOptions"
              label="所属学院"
            ></v-combobox>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="saveEdit">保存</v-btn>
          <v-btn @click="closeEditDialog">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-card>
      <v-card-item>
        <v-data-table :headers="studentHeaders" :items="items">
          <template v-slot:item="{ item }">
            <tr>
              <td>{{ item.sname }}</td>
              <td>{{ item.student_id }}</td>
              <td>{{ item.grade }}</td>
              <td>{{ item.sex }}</td>
              <td>{{ item.native_place }}</td>
              <td>{{ item.mobile_phone }}</td>
              <td>{{ item.dept_id }}</td>
              <td>{{ item.total_credit }}</td>
              <td>
                <v-btn icon="mdi-pencil" style="margin: 10px" @click="openEditDialog(item)">
                </v-btn>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card-item>
    </v-card>
  </v-card>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.searchS();
  },

  data() {
    return {
      search: "",
      pageSelected: -1,
      searchSid: "",
      searchSname: "",
      refresh: true,
      studentDialog: false,
      editDialog: false,
      studentHeaders: [
        { key: "sname", align: "start", sortable: false, title: "学生姓名" },
        { key: "student_id", title: "学号" },
        { key: "grade", title: "年级" },
        { key: "sex", title: "性别" },
        { key: "native_place", title: "地区" },
        { key: "mobile_phone", title: "手机号" },
        { key: "dept_id", title: "所属学院" },
        { key: "total_credit", title: "已修学分"},
        { key: "option", title: "选项", sortable: false },
      ],
      items: [],
      deptOptions: this.$root.dept_names,
      editedStudent: {},
      changeStudent: {},
    };
  },
  methods: {
    async searchS() {
      // 处理搜索按钮点击事件
      this.refresh = !this.refresh;
      console.log("Searching for:", this.searchSid, this.searchSname);
      let new_items = [];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/student",
        params: {
          student_id: this.searchSid,
          sname: this.searchSname,
        },
      }).then((res) => {
        console.log("searchS:", res);
        new_items = res.data;
      });
      this.items = new_items.data;
      this.refresh = !this.refresh;
      // 在这里可以添加搜索逻辑
    },
    async deleteS(student) {
      console.log("Deleting student with id:", this.deleteSid);

      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/student/delete",
        params: {
          student_id: student,
        },
      }).then((res) => {
        console.log("deleteS:", res.data);
      });
      this.searchS();
    },
    showDropdown(item) {
      // 处理下拉菜单按钮点击事件
      console.log("Dropdown clicked for:", item);
      // 在这里可以添加下拉菜单的显示逻辑
    },
    openDialog() {
      // 初始化编辑的学生信息
      this.studentDialog = true;
      this.editedStudent = {
        sname: "",
        student_id: "",
        grade: "",
        sex: "",
        native_place: "",
        mobile_phone: "",
        dept_id: "",
      };
      this.dialog = true;
    },
    async saveChanges() {
      // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
      console.log("Saved changes:", this.editedStudent);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/student/add",
        params: {
          sname: this.editedStudent.sname,
          student_id: this.editedStudent.student_id,
          grade: this.editedStudent.grade,
          sex: this.editedStudent.sex,
          native_place: this.editedStudent.native_place,
          mobile_phone: this.editedStudent.mobile_phone,
          dept_name: this.editedStudent.dept_id,
        },
      }).then((res) => {
        console.log("addS:", res.data);
      });
      // 关闭对话框
      this.studentDialog = false;
      this.searchS();
    },
    closeDialog() {
      // 关闭对话框
      this.studentDialog = false;
    },
    openEditDialog(item) {
      // 初始化编辑的学生信息
      this.editDialog = true;
      this.changeStudent = {
        sname: item.sname,
        student_id: item.student_id,
        grade: item.grade,
        sex: item.sex,
        native_place: item.native_place,
        mobile_phone: item.mobile_phone,
        dept_id: item.dept_id,
      };
      this.dialog = true;
    },
    closeEditDialog() {
      // 关闭对话框
      this.editDialog = false;
    },
    async saveEdit() {
      // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
      console.log("Saved changes:", this.editedStudent);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/student/update",
        params: {
          sname: this.changeStudent.sname,
          student_id: this.changeStudent.student_id,
          grade: this.changeStudent.grade,
          sex: this.changeStudent.sex,
          native_place: this.changeStudent.native_place,
          mobile_phone: this.changeStudent.mobile_phone,
          dept_name: this.changeStudent.dept_id,
        },
      }).then((res) => {
        console.log("editS:", res.data);
      });
      // 关闭对话框
      this.editDialog = false;
      this.searchS();
    },
  },
};
</script>
